<template >
  <div>
    <div class="comment-top-wrap">
      <div class="top-left" @click="toLastRoute">
        <i class="el-icon-arrow-left"></i><span>返回</span>
      </div>
      <div class="comment-name">{{ articleItem.nickname }}</div>
    </div>
    <el-scrollbar ref="scrollbar" class="comment-detail-wrap">
      <ArticleDetailItem
        class="infinite-list-item"
        :articleItem="articleItem"
        :commentPage="commentPage"
        @operateArticle="operateArticle"
        @focusArticle="focusArticle"
        :parentComponent="1"
      ></ArticleDetailItem>
      <div style="opacity: 0">{{ id }}</div>
    </el-scrollbar>
  </div>
</template>

<script>
import ArticleDetailItem from "./articledetail/ArticleDetailItem.vue";
export default {
  components: {
    ArticleDetailItem,
  },
  mounted() {
    // 滚动条滚动事件
    this.$refs.scrollbar.handleScroll = () => {
      var wrap = this.$refs.scrollbar.wrap;
      this.$refs.scrollbar.moveY = (wrap.scrollTop * 100) / wrap.clientHeight;
      this.$refs.scrollbar.moveX = (wrap.scrollLeft * 100) / wrap.clientWidth;
      let poor = wrap.scrollHeight - wrap.clientHeight;
      if (
        poor == parseInt(wrap.scrollTop) ||
        poor == Math.ceil(wrap.scrollTop) ||
        poor == Math.floor(wrap.scrollTop)
      ) {
        if (!this.isAllComment)
          // 加载更多评论
          this.commentPage++;
      }
    };
  },
  async created() {
    // 赋值文章的id
    this.articleId = this.$route.query.id;
    // 获取文章信息
    await this.getArticle();
  },
  data() {
    return {
      // 文章的id
      articleId: 0,
      // 文章的数据
      articleItem: {},
      // 加载文章评论的页数
      commentPage: 1,
    };
  },
  computed: {
    id() {
      this.articleId = this.$route.query.id;
      this.getArticle();
      return this.$route.query.id;
    },
  },
  watch: {},
  methods: {
    // 根据文章id获取文章信息
    async getArticle() {
      const { code, msg, result } = await this.$http.get(
        "/api/tweet/tweet_info/" + this.articleId
      );
      if (code != 200) {
        return this.$showMsg({ msg: "获取文章数据失败！", type: "error" });
      }
      let articleItem = result;

      // 获取文章是否被该用户点赞
      let result1 = await this.$http({
        url: "/api/tweet/user_action_status",
        type: "get",
        params: { aid: [this.articleId] },
      });
      if (result1.code != 200) {
        result1 = await this.$http({
          url: "/api/tweet/user_action_status",
          type: "get",
          params: { aid: [this.articleId] },
        });
      }
      if (result1.code != 200) {
        return this.$showMsg({ msg: "获取文章点赞数据失败！", type: "error" });
      }
      //  给文章添加点赞 收藏 分享 数据
      articleItem.collection = result1.result[0].collection;
      articleItem.like = result1.result[0].like;
      articleItem.share = result1.result[0].share;
      articleItem.focus = result1.result[0].relation;

      this.articleItem = articleItem;
      console.log("111111111", this.articleItem);
    },
    // 操作文章（点赞、评论、收藏、关注）
    operateArticle(method, type, id) {
      console.log(method, type, id);
      // 更新点赞、收藏、关注
      this.articleItem[type] = !this.articleItem[type];
      // 更新点赞、收藏、关注数量
      let num = 1;
      if (method == "add") {
        num = 1;
      } else {
        num = -1;
      }
      if (type == "like") {
        this.articleItem["likeCount"] += num;
      } else if (type == "collection ") {
        this.articleItem["collectionCount"] += num;
      }
      return this.$showMsg({ msg: "操作成功！", type: "success" });
    },
    // 关注、取消关注博主
    focusArticle(userId) {
      this.$emit("focusArticle", userId);
    },
    // 添加评论
    giveComment(commentForm) {
      this.$emit("giveComment", commentForm);
    },
    // 关注、取消关注博主
    focusArticle(userId) {
      this.articleItem.focus = !this.articleItem.focus;
    },
    // 返回上一个路由
    toLastRoute() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="less">
.comment-top-wrap {
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 5%);
  border-radius: 2px;
  display: flex;
  background-color: #fff;
  margin-bottom: 2px;
  position: relative;
  .top-left {
    height: 50px;
    line-height: 50px;
    margin-left: 5px;
    color: #333;
    font-size: 20px;
    font-weight: 550;
    text-align: center;
    cursor: pointer;
    .el-icon-arrow-left {
      color: #333;
      font-size: 20px;
    }
  }
  .comment-name {
    position: absolute;
    width: 200px;
    height: 50px;
    line-height: 50px;
    left: 50%;
    margin-left: -100px;
    font-size: 20px;
    color: #333;
  }
}
.comment-detail-wrap {
  height: 100vh;
}
</style>